<template>
	<div id="user"></div>
</template>

<script>
export default {
	data() {
		return {
			user: '',
			color:['#8d7fec',"#5085f2",'#e75fc3','#f87be2','#f2719a','#fca4bb','#f59a8f','#fdb301','#57e7ec','#cf9ef1','#57e7ec','#cf9ef1'],
			m2R2Data: []
		};
	},
	mounted() {
		this.getData();
		this.draw();
	},
	methods: {
		getData() {
			this.$http.get(this.$api.taskScroll).then(res => {
				res.data.forEach((item, index) => {
					this.m2R2Data.push({
						value: item.num,
						legendname: item.name,
						name: item.name,
						itemStyle: {
							color: this.color[index]
						}
					});
				});
				this.draw();
			});
		},
		draw() {
			this.user = this.$echarts.init(document.getElementById('user'));
			this.user.setOption({
				tooltip: {
					trigger: 'item',
					formatter: function(parms) {
						var str =
							parms.seriesName +
							'</br>' +
							parms.marker +
							'' +
							parms.data.legendname +
							'</br>' +
							'数量：' +
							parms.data.value +
							'</br>' +
							'占比：' +
							parms.percent +
							'%';
						return str;
					}
				},
				legend: {
					orient: 'vertical',
					left: '80%',
					align: 'left',
					top: 'middle',
					textStyle: {
						color: '#8C8C8C'
					},
					height: 300
				},
				series: [
					{
						name: '任务卷轴占比',
						type: 'pie',
						center: ['40%', '50%'],
						radius: ['40%', '65%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								position: 'outter',
								formatter: function(parms) {
									return parms.data.legendname;
								}
							}
						},
						labelLine: {
							show: false,
							normal: {
								length: 10,
								length2: 10,
								smooth: false
							}
						},
						data: this.m2R2Data
					}
				]
			});
		}
	}
};
</script>

<style scoped>
#user {
	width: 100%;
	height: 100%;
}
</style>
